window.onload = function () {
    var box1 = document.getElementById("box1");
    document.onkeydown = function (event) {
        //console.log(event.keyCode);
        //向上：38，向下：40，向左：37，向右：39
        var box1 = document.getElementById("box1");

        box1.style.top=getComputedStyle(box1,null).top;
        box1.style.left=getComputedStyle(box1,null).left;
        
        switch (event.keyCode) {
            case 38:
            box1.style.top=parseInt(box1.style.top)-10+'px';
            break;
            case 40:
            box1.style.top = parseInt(box1.style.top)+10+'px';
            break;
            case 39: 
            box1.style.left = parseInt(box1.style.left)+10+'px';
            break;
            case 37: 
            box1.style.left = parseInt(box1.style.left)-10+'px';
            //console.log(left);
            break;
        }
    }
}